<template>
  <view class="min-h-screen flex flex-col bg-[#F7F7F7]">
    <!-- 列表区域 -->
    <uv-list border>
      <uv-list-item v-for="item in list" :key="item.id" :title="item.title" link="navigateTo" border @click="item.onClick">
        <template v-if="item.body" #body>
          <text :class="item.bodyClass">{{ item.body }}</text>
        </template>
      </uv-list-item>
    </uv-list>

    <!-- 底部区域 -->
    <view class="mt-6 flex flex-col px-4 pb-10">
      <uv-button type="primary" shape="circle" @click="handleLogout">
        {{ $t('logout') }}
      </uv-button>

      <uv-button shape="circle" class="mt-4 text-center text-sm text-gray-500" @click="deleteAccount">
        {{ $t('deleteAccount') }}
      </uv-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { UrlPath } from '@/constants'
import { t } from '@/locale/index'
import { useUserStore } from '@/store'
import { useUnifiedTokenStore } from '@/store/useUnifiedToken'
import { HOME_PAGE } from '@/utils'

definePage({
  style: {
    navigationBarTitleText: '%settings%',
    navigationBarBackgroundColor: '#FFFFFF',
  },
})
const userStore = useUserStore()
const unifiedTokenStore = useUnifiedTokenStore()
// 使用storeToRefs解构userInfo
function goProfile() {
  uni.navigateTo({ url: '/pages/editUserInfo/editUserInfo' })
}

function goAboutUs() {
  uni.navigateTo({ url: '/pages/about/about' })
}

function goPrivacy() {
  uni.navigateTo({ url: `/pages/web-content/web-content?title=隐私政策&url=${UrlPath.privacyUrl}` })
}

function goUserAgreement() {
  uni.navigateTo({ url: `/pages/web-content/web-content?title=服务协议&url=${UrlPath.userProtocolUrl}` })
}

function goPrivacySettings() {
  uni.navigateTo({ url: '/pages/privacySettings/privacySettings' })
}

function goFeedback() {
  uni.navigateTo({ url: '/pages/feedback/feedback' })
}

// 列表项类型
interface ListItem {
  id: number | string
  title: string
  icon?: string
  onClick: () => void
  body?: string
  bodyClass?: string
}

const list = ref<ListItem[]>([])

// 准备 class 常量（避免重复）
const itemTextClass = 'text-[#333] text-[13pt] font-sans'

// 异步初始化模拟（也可以同步写死）
function fetchList() {
  const base = [
    {
      id: 1,
      title: t('profile'),
      onClick: goProfile,
      body: t('profile'),
      bodyClass: itemTextClass,
    },
    {
      id: 2,
      title: t('aboutUs'),
      onClick: goAboutUs,
      body: t('aboutUs'),
      bodyClass: itemTextClass,
    },
    {
      id: 3,
      title: t('privacyPolicy'),
      onClick: goPrivacy,
      body: t('privacyPolicy'),
      bodyClass: itemTextClass,
    },
    {
      id: 4,
      title: t('userAgreement'),
      onClick: goUserAgreement,
      body: t('userAgreement'),
      bodyClass: itemTextClass,
    },
    {
      id: 5,
      title: t('privacySettings'),
      onClick: goPrivacySettings,
      body: t('privacySettings'),
      bodyClass: itemTextClass,
    },
    {
      id: 6,
      title: t('feedback'),
      onClick: goFeedback,
      body: t('feedback'),
      bodyClass: itemTextClass,
    },
  ]

  list.value = base
}

onMounted(() => {
  fetchList()
})
function handleLogout() {
  uni.showModal({
    title: t('logoutConfirmTitle'),
    content: t('logoutConfirmContent'),
    success: (res) => {
      if (!res.confirm)
        return

      // 清空用户信息
      unifiedTokenStore.logout()

      // 提示用户
      uni.showToast({
        title: t('logoutSuccessToast'),
        icon: 'success',
      })

      // 等 Toast 出现后再返回上一页
      setTimeout(() => {
        // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
        if (getCurrentPages().length > 1) {
          // 小程序：如果有历史页，返回上一页
          uni.navigateBack()
        }
        else {
          // 小程序没有历史页，重定向到首页
          uni.reLaunch({ url: HOME_PAGE })
        }
        // #endif

        // #ifndef MP
        // H5 / App：直接返回上一页
        window.history.length > 1 ? uni.navigateBack() : uni.navigateTo({ url: HOME_PAGE })
        // #endif
      }, 200)
    },
  })
}

function deleteAccount() {
  return uni.showModal({
    title: t('deleteAccountConfirmTitle'),
    content: t('deleteAccountConfirmContent'),
  })
}
</script>

<style lang="scss">
.settings-page {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer {
  padding: 32rpx;
}

.delete-btn {
  margin-top: 20rpx;
  background: transparent;
  color: #888;
  font-size: 28rpx;
}
</style>
